<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>


<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-sm-3 ">
                    <div class="card bg-primary text-white padding-15">
                        <div class="pull-left">
                            <i class="fa-4x fa fa-user"></i>
                        </div>
                        <div class="pull-right text-right">
                            <div class="mb-5 font-22">124092</div>
                            <div class="font-14">总人数</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 ">
                    <div class="card bg-success text-white padding-15">
                        <div class="pull-left">
                            <i class="fa-4x fa fa-book"></i>
                        </div>
                        <div class="pull-right text-right">
                            <div class="mb-5 font-22">896969</div>
                            <div class="font-14">业务总数</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 ">
                    <div class="card bg-warning text-white padding-15">
                        <div class="pull-left">
                            <i class="fa-4x fa fa-warning"></i>
                        </div>
                        <div class="pull-right text-right">
                            <div class="mb-5 font-22">1024</div>
                            <div class="font-14">异常处理数</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 ">
                    <div class="card bg-danger text-white padding-15">
                        <div class="pull-left">
                            <i class="fa-4x fa fa-bell"></i>
                        </div>
                        <div class="pull-right text-right">
                            <div class="mb-5 font-22">22992</div>
                            <div class="font-14">消息数</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="col-sm-8">
                    <div class="panel ">
                        <div class="panel-heading">
                            访问趋势
                        </div>
                        <div class="panel-body">
                            <div id="chart1" style="height: 175px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="panel ">
                        <div class="panel-heading">
                            资源应用
                        </div>
                        <div class="panel-body">
                            <div class="mb-15">
                                <div>
                                    <span>A数据应用情况</span>
                                    <span class="pull-right">1256</span>
                                </div>
                                <div class="progress progress-xs ">
                                    <div style="width: 30%;" class="progress-bar"></div>
                                </div>
                            </div>
                            <div class="mb-15">
                                <div>
                                    <span>B数据应用情况</span>
                                    <span class="pull-right">2246</span>
                                </div>
                                <div class="progress progress-xs ">
                                    <div style="width: 40%;" class="progress-bar progress-bar-success"></div>
                                </div>
                            </div>
                            <div class="mb-15">
                                <div>
                                    <span>C数据应用情况</span>
                                    <span class="pull-right">2100G</span>
                                </div>
                                <div class="progress progress-xs ">
                                    <div style="width: 60%;" class="progress-bar progress-bar-warning"></div>
                                </div>
                            </div>
                            <div class="mb-15">
                                <div>
                                    <span>D数据应用情况</span>
                                    <span class="pull-right">4422</span>
                                </div>
                                <div class="progress progress-xs ">
                                    <div style="width: 80%;" class="progress-bar progress-bar-danger"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="col-sm-12">
                    <div class="panel">
                        <div class="panel-heading">
                            项目情况
                        </div>
                        <div class="panel-body">
                            <table class="table table-head table-hover">
                                <thead>
                                    <tr>
                                        <th>项目编号</th>
                                        <th>任务名称</th>
                                        <th>负责人</th>
                                        <th>完成进度</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>当前状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>A20220202001</td>
                                        <td>竞品分析</td>
                                        <td>赵佳佳</td>
                                        <td>
                                            <small>当前进度：45%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:45%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                        <td>
                                            <span class="badge badge-primary">正常</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>A20220202002</td>
                                        <td>竞品分析</td>
                                        <td>王小山</td>
                                        <td>
                                            <small>当前进度：20%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:20%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                        <td>
                                            <span class="badge badge-warning">暂停</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>B20220202001</td>
                                        <td>需求确认</td>
                                        <td>甄某某</td>
                                        <td>
                                            <small>当前进度：60%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:60%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                        <td>
                                            <span class="badge badge-primary">正常</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>A20220202012</td>
                                        <td>原型设计</td>
                                        <td>赵佳佳</td>
                                        <td>
                                            <small>当前进度：45%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:45%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                        <td>
                                            <span class="badge badge-danger">中止</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/echarts/echarts.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var chart1 = echarts.init(document.getElementById('chart1'));

            chart1.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    x: "5%",
                    y: "5%",
                    width: "90%",
                    height: "80%"
                },
                xAxis: {
                    type: 'category',
                    data: ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份', '7月份']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 344, 122, 455, 688],
                        type: 'line',
                        lineStyle: {// 设置线条的style等
                            normal: {
                                color: '#2d8cf0', // 折线线条颜色:红色
                            },
                        },
                        itemStyle: {
                            // 设置线条上点的颜色（和图例的颜色）
                            normal: {
                                color: '#2d8cf0',
                            },
                        },
                    }
                ]
            });

        });


    </script>
</body>

</html>